﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="jquery.jqzoom.css" />
<link rel="stylesheet" href="show.css" />
<script src="../jquery-1.5.1.min.js"></script>
<script src="jquery.jqzoom-core.js" type="text/javascript"></script>
<title>商品展示</title>
</head>
<body>
    <!--图片展示-->
    <div class="pic_zoom fl">
      <div class="big_pic"> <a href="images/img01.jpg" class="jqzoom" rel='gal1'  title="水果图片展示"> <img src="images/img01.jpg"  title=""  style="border: 0px solid #666;"  width="350" height="350"> </a> </div>
      <div class="zoomdiv">pic_zoom</div>
      <div class="thumb">
        <div class="left_btn fl" id="left_btn"><img src="images/left.gif" /></div>
        <div class="th_pics fl">
          <div class="mainpic">
            <ul id="thumblist">
              <li><a class="zoomThumbActive" href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/img01.jpg',largeimage: 'images/img01.jpg'}"><img src='images/img01.jpg'></a></li>
              <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/img02.jpg',largeimage: 'images/img02.jpg'}"><img src='images/img02.jpg'></a></li>
              <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/img03.jpg',largeimage: 'images/img03.jpg'}"><img src='images/img03.jpg'></a></li>
              <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/img04.jpg',largeimage: 'images/img04.jpg'}"><img src='images/img04.jpg'></a></li>
              <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/img05.jpg',largeimage: 'images/img05.jpg'}"><img src='images/img05.jpg'></a></li>
              <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/img06.jpg',largeimage: 'images/img06.jpg'}"><img src='images/img06.jpg'></a></li>
              <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/img07.jpg',largeimage: 'images/img07.jpg'}"><img src='images/img07.jpg'></a></li>
              <li><a href='javascript:void(0);' rel="{gallery: 'gal1', smallimage: 'images/img08.jpg',largeimage: 'images/img08.jpg'}"><img src='images/img08.jpg'></a></li>
            </ul>
          </div>
        </div>
        <div class="right_btn fl" id="right_btn"><img src="images/right.gif" /></div>
      </div>
    </div>
    <div class="clear"></div>
  <!--主体内容结束--> 
</body>
</html>
<script language="javascript">
$(document).ready(function(){
    $('#all').mousemove(function(){
		$(this).find('#allclass').show();
		$('#alla').css("color","#ca0400");
	});
	$('#all').mouseleave(function(){
		$(this).find('#allclass').hide();
		$('#alla').css("color","#fff");
	});
});
</script>
<script type="text/javascript">
	$(document).ready(function() {
		
		var cur_index = 1;
		var total = $('.mainpic img').length;
		
		//$('.jqzoom').jqzoom();
		
		$('.jqzoom').jqzoom({
				zoomType: 'reverse',
				lens:true,
				preloadImages: false,
				alwaysOn:false
		});
		
		$('#right_btn').click(function(){//向左翻页
			//alert('当前序号：'+cur_index+",是否满足条件("+cur_index+"<"+(total-4)+"):"+(cur_index<total-4));
			if(cur_index<total-4){
				$('.mainpic').animate({'margin-left':'-'+cur_index*64+'px'},500);
				//alert($('.mainpic').attr('style'));
				cur_index+=1;
			}
		});
		$('#left_btn').click(function(){//向右翻页
			//alert('当前序号：'+cur_index+",是否满足条件("+cur_index+">1):"+(cur_index>1));
			if(cur_index>1){
				cur_index-=1;
				$('.mainpic').animate({'margin-left':'-'+(cur_index-1)*64+'px'},500);
			}
		});
		
		
		$('.other a').click(function(){
			var objName = $(this).attr('rel');
			$('.other h2[class="cur"]').removeClass('cur');
			$('.other h2[name='+objName+']').addClass('cur');
			$('.information div[name="tab"]').hide();
			$('.information #'+objName).show();
		});
		
		$('a').bind('focus', function(){
			if(this.blur){ //如果支持 this.blur
				this.blur();
			}
		});
		
		$('.jqzoom').click(function(){
			location.href='imageView.html?img='+$(this).attr('src');
		});
		
	});
</script>